<style lang="less">
  
  .goodsList{
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 6px 2px;
    overflow: hidden;
    .itemBox{
      width: 300px;
      margin:10px;
      border: 1px solid #dfdfdf;
      overflow: hidden;
      img{
        object-fit: cover;
        width: 300px;
        height: 220px;
      }
      .nameandprice{
        display: flex;
        // justify-content: space-around;
        line-height: 40px;
        .name{
          flex: auto;
          padding: 0 10px;
          text-align: left;
        }
        .specs{
          flex: auto;
          text-align: right;
          padding-right: 6px;
        }
      }
      .btnBox{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        text-align: center;
        align-items: center;
        border-top: 1px solid #dfdfdf;
        a{
          flex: 1;
          padding-top: 10px;
          padding-bottom: 10px;
        }
        .poster{
          
        }
        .buy{
          
        }
      }
    }
    
  }
</style>
<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="20">

            <a-col :md="5" :sm="24">
              <a-form-item label="名称">
                <a-input v-model="queryParam.name" placeholder="请输入商品名称" />
              </a-form-item>
            </a-col>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons"
                :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="search">查询</a-button>
                <a-button style="margin-left: 8px" @click="reset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-card v-if="list.data&&list.data.length>0">
        <div class="goodsList">
          <div class="itemBox" v-for="item in list.data" :key="item.id">
            <img width="300px" height="220px" slot="cover" alt="模板封面" :src="item.image" @click="upDownOrderBtn(item)"/>
            <div class="nameandprice">
              <span class="ellipse1 name">{{item.name}}</span>
              <span class="red specs">{{ item.specs }}￥</span>
            </div>
            <div class="btnBox">
              <!-- <a class="poster">海报</a> -->
              <a class="buy" @click="upDownOrderBtn(item)">详情</a>
            </div>
          </div>
        </div>
      </a-card>
      <!-- 'pageSize': 10,
      'pageNo': 0,
      'totalPage': 6,
      'totalCount': 57 -->
      <a-card>
        <a-pagination style="float: right"
          v-model="list.pageNo"
          :page-size="list.pageSize"
          :total="list.totalCount">
        </a-pagination>
      </a-card>

      <!-- <create-detail-model
        ref="createModal"
        :visible="visibleCreate"
        :loading="confirmLoading"
        :model="mdl"
        @cancel="visibleCreate=false"
        @upDownOrder="upDownOrderBtn"/> -->
      <up-down-order
        ref="createUpDownOrderModal"
        :visible="visibleUpDownOrderModel"
        :loading="confirmLoading"
        :model="mdl"
        @ok="handleOk"
        @cancel="visibleUpDownOrderModel=false"/>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import { mapActions } from 'vuex'
  import UpDownOrder from './modules/UpDownOrder'

  export default {
    name: 'managements',
    components: {
      UpDownOrder
    },
    data() {
      return {
        list:[],
        producList: [],
        rules:'',
        mdls: {},
        updata: false,
        // create model
        visible: false,
        visibleUpDownOrderModel:false,
        visibleCreate: false,
        confirmLoading: false,
        mdl: null,
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {},
        loadData: (parameter) => {
          // this.queryParam.pageSize = 10
          this.queryParam.status = 1
          const requestParameters = Object.assign({}, parameter, this.queryParam)
          return this.$api.ProductPage(requestParameters).then(res => {
            return res.data
          })
        },
        pageNo:1,
        pageSize:8
      }
    },
    computed: {
      onChangeSelectTime(dates, dateStrings) {},
    },
    created() {
      this.getProductPage()
    },
    methods: {
      ...mapActions(['SET_SPECTS_LIST','SET_SPECTS_MODEL','SET_SKU_ITEM']),
      // 获取商品列表
      getProductPage() {
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          name: this.queryParam.name,
          status: 1
        }
        this.$api.ProductPage(params).then(res => {
          this.list = res.data
          // this.list.push(...list)
        })
      },
      // 下单
      handleOk() {
        const form = this.$refs.createModal.form
        // this.confirmLoading = true
        form.validateFields((errors, values) => {
          console.log("errors",errors)
          if (errors==null){
            this.$message.success('请填写正确表单')
            console.log("请填写正确表单")
            return
          }
          if (!errors) {
            // 新增
            new Promise((resolve, reject) => {
              // AddLabel(values).then(res => {
              //   console.log('value', res)
              //   if (res) {
              //     resolve()
              //   } else {
              //     this.confirmLoading = false
              //   }
              // })
            }).then((res) => {
              console.log(res);
              this.visible = false
              this.confirmLoading = false
              // 刷新表格
              this.$refs.table.refresh()
              this.$message.success('下单成功')
            })
          }
        })
      },
      // 查看详情
      open(e) {
        this.mdl = e
        console.log('------------------', e)
        this.visibleUpDownOrderModel = true
      },
      upDownOrderBtn(e) {
        this.mdl = e
        console.log('----------mdl--------', this.mdl)
        // this.visibleCreate = false
        this.visibleUpDownOrderModel = true
        this.getSpecsPage(this.mdl.id)
      },
      //获取商品规格
      getSpecsPage(id) {
        const params = {
          pageNo:1,
          pageSize:1000,
          proudct_id:id
        }
        this.$api.SpecsPage(params).then(res => {
          const specsList = res.data.data
          this.SET_SPECTS_LIST(specsList)
          console.log("this.specsList.len",specsList.length)
          console.log("time",new Date().getTime())
          const spects_model = specsList[0]&&specsList[0].id
          this.SET_SPECTS_MODEL(spects_model)
          const skuItem = specsList.filter(res=>res.id==spects_model)[0]
          this.SET_SKU_ITEM(skuItem)
        })
      },
      search() {
        this.getProductPage()
      },
      // 重置
      reset() {
        this.queryParam = {}
        this.getProductPage()
      },
    },
  }
</script>
